import { Button, DatePicker, Input, NavBar } from 'antd-mobile'
import Icon from '@/components/Icon'
import './index.scss'
import classNames from 'classnames'
import { billListData } from '@/contants'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'

import { useDispatch } from 'react-redux'
import { createBill } from '@/store/modules/billStore'

import { v4 as uuidv4 } from 'uuid'

import  * as dayjs  from 'dayjs'
import isToday from 'dayjs/plugin/isToday'

const New = () => {
  dayjs.extend(isToday)

  const navigate = useNavigate()

  //记账类型
  const [type, setType] = useState('pay')

  const [dateVisible, SetDateVisible] = useState(false)
  const [date, setDate] = useState(new Date())

  const [money, setMoney] = useState()
  //日期选择
  function confirm(val) {
    SetDateVisible(false)
    setDate(val)
  }

  const dispatch = useDispatch()

  const [useFor, setUseFor] = useState('other')
  //新增账单
  function saveBill(){
    let bill = {
        "type": type,
        "money": type === "pay" ? -Math.abs(Number(money)) : Math.abs(Number(money)),
        "date": dayjs(date).format(),
        "useFor": useFor,
        "id": uuidv4()
    }
    console.log("bill",bill)
    dispatch(createBill(bill))

    setMoney('')
    setDate(new Date())
    setType('pay')
    setUseFor('other')
    navigate(-1)
  }
  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames({'selected': type === 'pay'})}
            onClick={() => setType('pay')}
          >
            支出
          </Button>
          <Button
            className={classNames({'selected': type === 'income'})}
            shape="rounded"
            onClick={() => setType('income')}
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date" onClick={() => SetDateVisible(true)}>
              <Icon type="calendar" className="icon" />
              <span className="text">{dayjs(date).isToday() ? '今天' : dayjs(date).format("YYYY-MM-DD")}</span>

              <DatePicker
                className="kaDate"
                title="记账日期"
                visible={dateVisible}
                max={new Date()}
                onClose = {() => {
                  SetDateVisible(false)
                }}
                onConfirm={(date) => { 
                    confirm(date)
                }}                
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={money}
                onChange={(value) => setMoney(value)}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {billListData[type].map(item => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map(item => {
                  return (
                    <div
                      className={classNames(
                        'item',
                        {'selected': useFor === item.type}
                      )}
                      key={item.type}
                      onClick={() => {setUseFor(item.type)}}

                    >
                      <div className="icon">
                        <Icon type={item.type}   />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>

      <div className="btns">
        <Button className="btn save"
        onClick={()=>{saveBill() }}>
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New